<template>
  <div>
    <div class="c-pf c-w100 c-pz100 c-ph24 c-bg-white c-maxw640" :class="unenableTopNav ? 'c-p-t0' : 'c-p-t68'">
      <div class="c-flex-row c-aligni-center">
        <my-small-tabbar
          id="tabhBar"
          :tabList="tabList"
          :tabIndex="faceType"
          :flexClass="'c-justify-sb'"
          @changeTab="changeType"
          :tabNameClass="c-fw-b"
          :fontSet="fontSet"
          class="c-w50"
        ></my-small-tabbar>
      </div>
    </div>
    <!-- tabcontent -->
    <!-- 课程详情 -->
    <div v-if="faceType == 0 && courseDetail !== null">
      <div class="c-ph24 c-pt76">
        <div class="c-pv30">
          <div class="c-flex-row">
            <div class="c-ww210 c-hh140 c-br10 c-p">
              <template class="c-w100 c-hh140 c-br10">
                <img
                  class="c-w100 c-maxh140 c-br10"
                  :src="$addXossFilter(courseDetail.image, require('../../assets/default-course.png'))"
                  alt=""
                >
              </template>
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
              <div class="c-fs24 c-text-ellipsis2 c-wb-ba c-fc-xblack">{{courseDetail.courseName}}</div>
              <div class="c-fs20 c-text-ellipsis1 c-fc-gray">学员数：{{courseDetail.studentNum}}</div>
              <div class="c-fs20 c-fc-gray">
                <template v-if="isSameDay(courseDetail.startTime, courseDetail.endTime)">
                  <span>{{courseDetail.newTime.first}}</span>
                  <span class="c-ph5">{{'('+`${courseDetail.newTime.second}`+')'}}</span>
                  <span>{{courseDetail.newTime.third}}</span>
                </template>
                <template v-else>
                  <span>{{courseDetail.startTime}}</span>
                  <span class="c-ph5">-</span>
                  <span>{{courseDetail.endTime}}</span>
                </template>
              </div>
            </div>
          </div>
          <div
            class="c-fs20 c-text-ellipsis1 c-fc-gray c-mt32"
            @click="goLocation"
            v-if="courseDetail.provinceName != null && courseDetail.cityName != null && courseDetail.areaName != null && courseDetail.details != null"
          >
            <i class="iconfont c-fs20">&#xe90f;</i>
            <span>上课地点：{{courseDetail.provinceName+courseDetail.cityName+courseDetail.areaName+courseDetail.details}}</span>
          </div>
        </div>
      </div>
      <div class="c-w100 c-hh16 c-bg-sgray"></div>
      <div class="c-pv30 c-ph24 c-bg-white c-mb20">
        <div class="c-bd-b1 c-pb30 c-fc-gray c-flex-row c-aligni-center c-justify-sb">
          <span class="c-fs24 c-fc-gray">课节信息</span>
        </div>
        <div class="c-minh110">
          <div class=" c-flex-row c-aligni-start c-fw-b c-fs26" v-if="courseDetail.lessonName">
            <div class="c-mt30 c-lh36 c-w0 c-flex-grow1">{{courseDetail.lessonName}}</div>
          </div>
          <div class="c-flex-column c-fs24" v-if="courseDetail.lessonDetail">
            <div class="c-mt30 c-lh36" v-html="courseDetail.lessonDetail"></div>
          </div>
        </div>
      </div>
      <template v-if="courseDetail.isShowButton">
        <div class="c-w100 c-maxw640 c-hh100 c-bd-t1 c-bg-white c-pf c-p-b0 c-flex-row c-aligni-center c-ph24" @click="handleClickLive(courseDetail.liveStatus)">
          <div class="c-w100 c-hh64 c-fc-white c-fs28 c-flex-row c-flex-center c-br30" :class="{'c-bg-d7':courseDetail.liveStatus == 1 || courseDetail.liveStatus == 4, 'theme-bg-gradient': courseDetail.liveStatus == 2 || courseDetail.liveStatus == 3}">{{courseDetail.liveStatus == 1 ? '等待课程开始' : courseDetail.liveStatus == 2 ? '开始上课' : courseDetail.liveStatus == 3 ? '回顾课程' : courseDetail.liveStatus ? '已结束' : ''}}</div>
        </div>
      </template>
    </div>
    <!-- 课堂管理 -->
    <div v-show="faceType == 1">
      <div class="c-ph24 c-pt90">
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <div class="c-fc-xblack c-fs24 c-fw600">已预约学员</div>
          <div v-if="courseDetail && courseDetail.teacherReserve == 1" class="c-ww106 c-hh36 theme-bg c-fc-white c-fs20 c-flex-row c-flex-center c-br20" @click="openReservation">新增预约</div>
        </div>
        <div
          class="c-flex-row c-aligni-center"
          @click="handleClickStudent(index)"
          v-for="(item, index) in studentList"
          :key="index"
        >
          <div class="c-mr20 c-flex-shrink0 c-flex-row c-flex-center">
            <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="item.isChecked ? 'theme-fc' : 'c-fc-A'">{{item.isChecked ? '&#xe796;' : '&#xe6f7;'}}</div>
          </div>
          <div class="c-bd-b1 c-pv30 c-flex-row c-aligni-center c-flex-grow1">
            <div class="c-ww80 c-hh80 c-text-hidden c-p">
              <img
                class="c-brp50 c-h c-w100"
                :src='$addXossFilter(item.image || (item.studentSex == 0 ? defultHeadUrl : item.studentSex == 1 ? boyHeadUrl : girlHeadUrl))'
                alt=""
              >
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
              <div class="c-fs24 c-text-ellipsis1 c-fc-xblack">
                <span>{{item.studentName}}</span>
                <i
                  class="iconfont c-fs24 theme-fc"
                >{{item.studentSex == 2 ? '&#xe96a;' : (item.studentSex == 1 ? '&#xe96b;' : '')}}</i>
              </div>
              <div class="c-fs24 c-text-ellipsis1 c-fc-gray c-mt10">{{item.mobile}}</div>
            </div>
            <div class="c-flex-row c-aligni-center c-fs24 c-fc-gray" @click.stop="handleClickShowModal(1, item, index)">
              <span class="c-pr20">{{isSignInName(item.isSignIn)}}</span>
              <i class="iconfont c-fs24">&#xe60e;</i>
            </div>
          </div>
        </div>
        <loading-status-tem
          :dataStatus="dataStatus"
          noDataText="暂无学员"
        ></loading-status-tem>
      </div>
    </div>
    <div v-if="faceType == 1" class="c-flex-row c-aligni-center c-justify-sb c-bd-t1-eee c-w100 c-pf c-p-b0 c-bg-white c-hh104">
      <div class="c-flex-row c-aligni-center">
        <div class="c-flex-row c-hh64 c-aligni-center" @click="clickSelectAll">
          <div class="c-ml20 c-flex-shrink0 c-flex-row c-flex-center">
            <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="selectAll ? 'theme-fc' : 'c-fc-A'">{{selectAll ? '&#xe796;' : '&#xe6f7;'}}</div>
          </div>
          <span class="c-fs28 c-pl12 c-fc-sblack">全选</span>
        </div>
        <span class="c-fs28 c-ml40 c-fc-sblack c-flex-row c-aligni-center c-lh32">已选：<span class="theme-fc">{{selectedStudents}}</span>人</span>
      </div>
      <div :class="isChecked && !submitLoading ? '' : 'c-opacity50'" class="c-flex-row c-flex-center c-ww220 c-hh64 c-br40 c-fs28 theme-bg c-fc-white c-mr24" @click="handleClickShowModal(2)">批量操作</div>
    </div>
    <!-- 下拉选择 -->
    <open-modal
      :openModal="openModal"
      @closeModal="closeModal"
      :isOpenDisabledScroll="false"
    >
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pr24 c-pb30 c-pl24 c-minh50vh c-maxh80vh c-flex-column">
        <div class="c-flex-row c-aligni-center c-justify-center c-p c-hh78 c-flex-shrink0">
          <span class="c-fs28 c-fw600 c-fc-xblack">选择操作</span>
          <span
            class="c-fs24 iconfont c-pa c-p-r0 c-fc-gray"
            @click="handleClickModal"
          >&#xe8fd;</span>
        </div>
        <div class="c-contexty-scroll c-flex-grow1">
          <div
            class="c-pv20 "
            v-for="(item, index) in select"
            :key="index"
            :class="index == select.length - 1 ? '':'c-bd-b1'"
            v-if="isShowSelectItem(item)"
          >
            <div
              class="c-flex-row c-aligni-center c-justify-sb"
              @click="handleClickSelect(item)"
            >
              <div class="c-text-ellipsis1 c-fs24 c-fc-xblack">{{item.name}}<span v-if="item.desc" class="c-fs20 c-fc-gray">{{item.desc}}</span></div>
              <div
                class="iconfont c-fs32 c-flex-shrink0 c-mr4"
                :class="item.id == selectId ? 'theme-fc' : 'c-fc-f2'"
              >&#xe796;</div>
            </div>
          </div>
        </div>
        <div class="c-w100 c-bg-white c-flex-row c-aligni-center c-flex-shrink0">
          <div
            class="c-w100 c-hh64 theme-bg c-fc-white c-fs28 c-flex-row c-flex-center c-br30"
            @click="confirmSubmit"
          >确定</div>
        </div>
      </div>
    </open-modal>
    <cj-popup v-model="isShowReservation" round position="bottom" @closed="closeReservation">
      <div class="c-w100 c-flex-column c-pz1 c-pb20 c-br-tl20 c-br-tr20 c-p c-minh50vh c-maxh80vh">
        <div class="c-pv20 c-p c-bg-white c-flex-shrink0">
          <div class="c-fs28 c-fw600 c-textAlign-c">选择需要预约的学员</div>
          <div class="iconfont c-fs20 c-fc-gray c-pa  c-p-r24 c-p-t30 c-pz10" @click="closeReservation">&#xe61b;</div>
        </div>
        <div id="reservationStusList" class="c-ph24 c-content-scroll c-flex-grow1 c-pb80" @scroll="onScrollEvent">
          <div class="c-flex-row c-aligni-center" @click="chooseStudent(item)" v-for="(item, index) in reservationStus" :key="index" >
            <div class="c-mr20 c-flex-shrink0 c-flex-row c-flex-center">
              <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="selectedStuIds.includes(item.purchaseId) ? 'theme-fc' : 'c-fc-A'">{{selectedStuIds.includes(item.purchaseId) ? '&#xe796;' : '&#xe6f7;'}}</div>
            </div>
            <div class="c-bd-b1 c-pv30 c-flex-row c-aligni-center c-flex-grow1">
              <div class="c-ww80 c-hh80 c-text-hidden c-p">
                <img class="c-brp50 c-h c-w100" :src="$addXossFilter(item.image || (item.studentSex == 0 ? defultHeadUrl : item.studentSex == 1 ? boyHeadUrl : girlHeadUrl))" alt="">
              </div>
              <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
                <div class="c-fs24 c-text-ellipsis1 c-fc-xblack">
                  <span>{{item.studentName}}</span>
                  <i class="iconfont c-fs24 theme-fc" >{{item.studentSex == 2 ? '&#xe96a;' : (item.studentSex == 1 ? '&#xe96b;' : '')}}</i>
                </div>
                <div class="c-fs24 c-text-ellipsis1 c-fc-gray c-mt10">{{item.mobile}}</div>
              </div>
            </div>
          </div>
          <loading-status-tem noDataStyle="padding: 1.75rem;" :dataStatus="reservationStatus" noDataText="暂无学员"></loading-status-tem>
        </div>
        <div class="c-flex-shrink0 c-flex-row c-aligni-center c-justify-sb c-bd-t1-eee c-w100 c-pf c-p-b0 c-bg-white c-hh104">
          <div class="c-flex-row c-aligni-center">
            <div class="c-flex-row c-hh64 c-aligni-center" @click="chooseAllStudent">
              <div class="c-ml20 c-flex-shrink0 c-flex-row c-flex-center">
                <div class="c-textAlign-r iconfont c-fs32 c-lh" :class="selectedStuIds.length && selectedStuIds.length == reservationStus.length ? 'theme-fc' : 'c-fc-A'">{{selectedStuIds.length && selectedStuIds.length == reservationStus.length ? '&#xe796;' : '&#xe6f7;'}}</div>
              </div>
              <span class="c-fs28 c-pl12 c-fc-sblack">全选</span>
            </div>
            <span class="c-fs28 c-ml40 c-fc-sblack c-flex-row c-aligni-center c-lh32">已选：<span class="theme-fc">{{selectedStuIds.length}}</span>人</span>
          </div>
          <div :class="selectedStuIds.length && !submitLoading ? '' : 'c-opacity50'" class="c-flex-row c-flex-center c-ww220 c-hh64 c-br40 c-fs28 theme-bg c-fc-white c-mr24" @click="teacherReservation">确定</div>
        </div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import openModal from "@/components/templates/common/openModal.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: 'CourseManagmentDetail',
  components: {
    openModal,
    MySmallTabbar,
    loadingStatusTem
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      faceType: 0,
      detailId: '', //课程详情id
      courseDetail: null, //课程详情
      studentList: [], //学员列表
      tabList: [{
        title: '课程详情',
        index: 0,
      }, {
        title: '课堂管理',
        index: 1,
      }],
      fontSet: {
        activeColor: 'theme-fc',
      },
      openModal: false,
      selectId: '', //选中得id
      selectType: '', //选中得type
      itemIndex: 0, //列表下标
      itemId: '', //列表id
      itemType: '', //列表类型
      select: [{
        id: 1,
        name: '签到',
        type: 'sign',
        checked: false,
      }, {
        id: 2,
        name: '未到',
        type: 'noShow',
        checked: false
      }, {
        id: 3,
        name: '请假',
        type: 'leave',
        checked: false
      }],
      dataStatus: 'HAS_MORE_DATA',
      page: 1,
      limit: 1000,
      girlHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/sbM2pllKIy4XBL6YvzVWg3fGy7e86dZWxGqeGolZ.png'),
      boyHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/A9DusxF83dvjP350bfy4L4FskZTvDmpRde96Ezoq.png'),
      defultHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/PehFKbnKSxefJgdSicZ84CV8LmPKLmdBwA8WmbuR.png'),
      selectAll: false,
      operationType: 1, // 操作类型 1单个  2批量
      submitLoading: false,
      isShowReservation: false, // 是否显示新增预约弹窗
      selectedStuIds: [], // 已选预约的学生id
      reservationStus: [], // 可预约的学生列表
      reservationStatus: 'HAS_MORE_DATA',
      reservationPage: 1,
      reservationLimit: 1000,
      isLoading: false
    }
  },
  activated() {
    setDocumentTitle("课程详情");
    this.faceType = 0;
    this.selectId = ''; //选中得id
    this.selectType = ''; //选中得type
    this.itemIndex = 0; //列表下标
    this.itemId = ''; //列表id
    this.itemType = ''; //列表类型
    this.detailId = this.$route.query.id || "";
    this.openModal = false;
    this.selectAll = false;
    this.operationType = 1;
    this.submitLoading = false
    this.isShowReservation = false
    this.selectedStuIds = []
    this.reservationStus = []
    this.select = [
    {
      id: 1,
      name: '签到',
      type: 'sign'
    }, {
      id: 2,
      name: '未到',
      type: 'noShow'
    }, {
      id: 3,
      name: '请假',
      type: 'leave'
    }]
    this.getScheduleDetails();
    this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  creadted() {
    utilJs.appShare(this);
  },
  computed: {
    // 判断是否跨天
    isSameDay() {
      return function (start, end) {
        let startTime = new Date(start);
        let endTime = new Date(end);
        let isSameDay = startTime.getFullYear() == endTime.getFullYear() && startTime.getMonth() == endTime.getMonth() && startTime.getDate() == endTime.getDate();
        return isSameDay;
      }
    },
    selectedStudents() {
      return this.studentList.filter(i => !!i.isChecked).length
    },
    isChecked() {
      const index = this.studentList.findIndex(i => i.isChecked)
      return index > -1
    },
    // 判断是否有顶部导航
    unenableTopNav() {
      const companyAuth = localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : {};
      return companyAuth && companyAuth.companyTopNav && companyAuth.companyTopNav.style && companyAuth.companyTopNav.style == 5
    },
  },
  methods: {
    // 老师代预约
    teacherReservation() {
      if (this.isLoading) {
        return
      }
      if (!this.selectedStuIds.length) {
        return
      }
      const data = {
        scheduleListId: this.detailId,
        purchaseIds: this.selectedStuIds || []
      }
      this.isLoading = true
      utilJs.postMethod(`${global.apiurl}educationSystem/mentor/teacher/reserve`, data, res => {
        this.$showCjToast({
          text: "预约成功",
          type: "success",
        });
        this.isLoading = false
        this.selectedStuIds = []
        this.closeReservation()
        this.initData(1)
      }, failRes => {
        this.isLoading = false
      })
    },
    isShowSelectItem(item = {}) {
      let signTypes = []
      if (this.operationType == 2 ) { // 批量操作
        const selectedStus = this.studentList.filter(i => !!i.isChecked)
        signTypes = Array.from(new Set(selectedStus.map(i => Number(i.isSignIn))));
      } else if (this.operationType == 1 ) { // 单个操作
        const stuSignType = Number(this.itemType == 4 || this.itemType == 5 ? 0 : this.itemType)
        signTypes = [stuSignType]
      }

      // 已签到选项：学员状态可以是 未选择||未到||请假
      if (item.id == 1 && (signTypes.includes(0) || signTypes.includes(2) || signTypes.includes(3))) {
        return true
      }
      // 未到选项：学员状态可以是 未选择||签到||请假
      if (item.id == 2 && (signTypes.includes(0) || signTypes.includes(1) || signTypes.includes(3))) {
        return true
      }
      // 请假选项：学员状态可以是 未选择||签到||未到
      if (item.id == 3 && (signTypes.includes(0) || signTypes.includes(1) || signTypes.includes(2))) {
        return true
      }
      // 取消签到选项：学员状态可以是 签到||未到||请假
      if (item.id == 4 && (signTypes.includes(1) || signTypes.includes(2) || signTypes.includes(3))) {
        return true
      }
      // 取消预约选项：学员状态可以是 未选择
      if (item.id == 5 && signTypes.includes(0)) {
        return true
      }
      return false
    },
    getReserveStudents() {
      if (this.reservationStatus == 'LOADING') {
        return;
      }
      this.reservationStatus = 'LOADING';

      utilJs.getMethod(global.apiurl + 'educationSystem/mentor/teacher/getReserveStudents/' + this.detailId + '?page=' + this.reservationPage + '&limit=' + this.reservationLimit, res => {
        this.reservationStus = this.reservationStus.concat(res.data);

        if (res.data && (res.data.length < this.reservationLimit)) {
          this.reservationStatus = this.reservationPage == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.reservationStatus = 'HAS_MORE_DATA';
          this.reservationPage++;
        }
      },
        failRes => {
          this.reservationStatus = 'DATA_ERROR';
        }
      );
    },
    onScrollEvent(e) {
      let element = document.getElementById('reservationStusList');
      utilJs.elementLoading(element, () => {
        if (this.reservationStatus == 'HAS_MORE_DATA' && this.reservationStus.length > 0) {
          this.getReserveStudents();
        }
      })
    },
    chooseAllStudent() {
      // 已经全选，点击后，取消全选
      if (this.selectedStuIds.length == this.reservationStus.length) {
        this.selectedStuIds = []
        return
      }
      this.selectedStuIds = this.reservationStus.map(i => i.purchaseId)
    },
    chooseStudent(item = '') {
      const index = this.selectedStuIds.findIndex(i => i == item.purchaseId)
      if (index > -1) {
        this.selectedStuIds.splice(index, 1);
        return
      }
      this.selectedStuIds.push(item.purchaseId)
    },
    openReservation() {
      this.isShowReservation = true
      this.selectedStuIds = []
      this.reservationStatus = 'HAS_MORE_DATA'
      this.reservationPage = 1
      this.reservationStus = []
      this.getReserveStudents()
    },
    closeReservation() {
      this.isShowReservation = false
    },
    clickSelectAll() {
      if (this.submitLoading) {
        return
      }
      this.studentList.forEach((item, index) => {
        item.isChecked = !this.selectAll
        // 防止selectedStudents不更新
        this.$set(this.studentList, index, item)
      })
      if (!(this.studentList && this.studentList.length)) {
        return
      }
      this.selectAll = !this.selectAll
    },
    checkAllSelected() {
      const unSelected = this.studentList.findIndex(i => !i.isChecked)
      this.selectAll = this.studentList.length && unSelected == -1 ? true : false
    },
    handleClickStudent(index) {
      if (this.submitLoading) {
        return
      }
      this.studentList[index].isChecked = !this.studentList[index].isChecked
      // 防止视图不更新
      this.$set(this.studentList, index, this.studentList[index])
      this.checkAllSelected()
    },
    handleClickLive(state) {
      // 1 等待课程开始 2 签到并开始上课 3 回顾课程 4 已结束
      if (state == 2 || state == 3) {
        this.routerGoRoom();
      }
    },
    routerGoRoom() {
      let goPath = 'liveRoom';
      if (this.courseDetail.playType == 2) {
        goPath = 'liveVerticalRoom'
      }
      this.$routerGo(this, "push", { path: `/homePage/live/${goPath}?liveId=${this.courseDetail.liveId}&SocialRoomId=${this.courseDetail.socialRoomId}&eduId=${this.detailId}` });
    },
    initData(isFromTeacherReservation = 0) {
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.studentList = [];
      this.getScheduleStudentList(isFromTeacherReservation);
    },
    getScheduleStudentList(isFromTeacherReservation = 0) {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';

      utilJs.getMethod(global.apiurl + 'educationSystem/mentor/teacher/scheduleStudentList/' + this.detailId + '?page=' + this.page + '&limit=' + this.limit, res => {
        this.studentList = this.studentList.concat(res.data);

        if (res.data && (res.data.length < this.limit)) {
          this.dataStatus = this.page == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          this.page++;
        }
        if (isFromTeacherReservation && this.selectAll) {
          this.studentList.forEach(i => {
            i.isChecked = true
          })
        }
      },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.studentList.length > 0) {
          this.getScheduleStudentList();
        }
      });
    },
    getScheduleDetails() {
      utilJs.getMethod(global.apiurl + 'educationSystem/mentor/teacher/scheduleDetails/' + this.detailId, res => {
        this.courseDetail = res;
        // 是否开启代预约
        const isReservation = res && res.teacherReserve == 1 ? [{
          id: 5,
          name: '取消预约',
          desc: '（取消预约后，将不能进行签到操作）',
          type: 'remove',
          checked: false,
        }] : []
        // 是否开启未到扣课时（现在都默认开启）
        const isClassHour = [{
          id: 4,
          name: '取消签到',
          desc: '（取消签到后，签到状态变成待签到）',
          type: 'cancel',
          checked: false,
        }]
        // 开启老师代预约
        // 签到'sign',未到'noShow',请假'leave',取消预约'remove', 取消签到'cancel'
        this.select = [...isReservation, ...isClassHour, ...this.select]
      },
        failRes => {
        }
      );
    },
    goLocation() {
      // 地址跳转
      this.$routerGo(this, "push", { path: '/addressLocation', query: { address: this.courseDetail.provinceName + this.courseDetail.cityName + this.courseDetail.areaName + this.courseDetail.details } })
    },
    isSignInName(type) {
      if (type == 3) {
        return '请假'
      } else if (type == 1) {
        return '签到'
      } else if (type == 2) {
        return '未到'
      } else {
        return '未选择'
      }
    },
    handleClickShowModal(operationType = 1, item = {}, index = 0) { // operationType 1单个操作   2批量操作
      if ((!this.isChecked && operationType == 2) || this.submitLoading) {
        return
      }
      this.itemType = '';
      this.itemId = '';
      if (operationType == 1) {
        this.itemType = item.isSignIn;
        this.itemId = item.id;
      }
      this.itemIndex = index;
      this.selectId = '';
      this.selectType = '';
      this.operationType = operationType
      this.openModal = true;
    },
    submitBatch() {
      const selectedStudents = this.studentList.filter(i => !!i.isChecked).map(i => { return { id: i.id, studentName: i.studentName } })
      if (!selectedStudents.length || !this.selectType) {
        return
      }
      if (this.operationType == 2) {
        this.$showCjToast({
          text: "正在批量处理中",
          type: "success",
          time: 3000
        });
      }
      const data = {
        reserveCourses: selectedStudents
      }
      const _this = this;
      this.submitLoading = true
      utilJs.postMethod(`${global.apiurl}educationSystem/mentor/teacher/batch/${this.selectType}`, data, res => {
        let failStuIds = []
        const signItem = this.select.filter(i => i.id == this.selectId)[0] || {}
        const signInName = signItem.name || ''
        if (res && res.length) {
          failStuIds = res
        }
        this.$showCjToast({
          text: selectedStudents.length == failStuIds.length ? `修改${signInName}失败` : ("操作成功" + (failStuIds.length ? `<br>已选的部分学员不支持修改${signInName}` : '')),
          type: selectedStudents.length == failStuIds.length ? 'warn' : 'success',
          time: 1000
        }).then(() => {
            _this.page = 1
            _this.studentList = []
            _this.getScheduleStudentList()
            _this.selectId = '';
            _this.selectType = '';
            _this.selectAll = false;
            _this.submitLoading = false
        });
        if (this.selectType == 'remove') { // 取消预约需要刷新列表
          this.initData()
        }
      }, failRes => {
        this.selectId = '';
        this.selectType = '';
        this.selectAll = false;
        this.submitLoading = false
      })
    },
    handleClickSubmit() {
      this.openModal = false;
      if (this.operationType == 1) { // 操作单个学员的状态变更
        this.checkStatus(this.itemType, this.itemId);
        return
      }
      this.submitBatch()
    },
    confirmSubmit() {
      if (this.selectType == 'remove') { // 取消预约需要二次确认
        this.$cjConfirm({
          title: '取消预约确认',
          message: '确认要对选中的学员取消预约吗？<br>取消预约后，学员将无法进行签到。',
          cancelButtonText:'放弃',
          confirmButtonText:'确认',
          onConfirm:() => {
            this.handleClickSubmit();
          },
          onCancel:() => {}
        })
        return
      }
      this.handleClickSubmit()
    },
    checkStatus(isSignIn, id) {
      let _this = this;
      let apiurl = '';
      if (this.selectType == '') {
        return true;
      }
      if (isSignIn == 0) {
        apiurl = 'educationSystem/mentor/teacher/' + this.selectType + '/' + id + ''
      } else {
        apiurl = 'educationSystem/mentor/teacher/change/' + this.selectType + '/' + id + ''
      }
      utilJs.postMethod(global.apiurl + apiurl, {}, res => {
        this.$showCjToast({
          text: "修改成功",
          type: "success",
          time: 1000
        }).then(() => {
          _this.studentList.forEach((el, index) => {
            if (index == _this.itemIndex) {
              el.isSignIn = _this.selectId == 4 || _this.selectId == 5 ? 0 : _this.selectId;
            }
          })
        });
        if (this.selectType == 'remove') { // 取消预约需要刷新列表
          this.initData()
          this.checkAllSelected()
        }
      }, failRes => {
        apiurl = '';
        this.selectType = '';
      })
    },
    handleClickSelect(item) {
      // 选中状态
      this.selectId = item.id;
      this.selectType = item.type;
    },
    changeType(faceType) {
      if (faceType == 0) {
        setDocumentTitle("课程详情");
      } else {
        setDocumentTitle("课堂管理");
      }
      // tab切换
      this.faceType = faceType;
    },
    closeModal() {
      this.selectId = '';
      this.selectType = '';
      this.openModal = false;
    },
    handleClickModal() {
      this.selectId = '';
      this.selectType = '';
      this.openModal = false;
    },
    //分享
    wechatShare: function () {
      let title = '课程详情';
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?id=${this.detailId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = '课程详情';
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?id=${this.detailId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  }
}
</script>

<style scoped>
.c-pt76 {
  padding-top: 1.9rem;
}
</style>